<script setup lang="ts">

defineOptions({
    name: "ReMenu"
})
const props = defineProps({
    menu: {
        type: Object,
        required: true
    }
})
</script>

<template>
    <div class="aside-menu">
        <div class="menu-icon">
            <IconifyIconOnline :icon="props.menu.icon" />
        </div> <span style="line-height: 25px">{{ props.menu.name }}</span>
    </div>
</template>

<style scoped lang="css">
.aside-menu{
    height: 25px;
    color: rgba(250,250,250,0.65);
    margin: 0 0 25px 40px;
    transition: all 100ms;
    cursor: pointer;
}
.menu-icon{
    display: inline-block;
    vertical-align: baseline;
    margin-right: 10px;
}
.aside-menu:hover{
    color: rgb(255,255,255);
}
</style>
